<!--
 * @Descripttion: 
 * @version: 
 * @Author: congsir
 * @Date: 2023-12-20 14:47:26
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-12-22 10:20:14
-->
<template>
  <div class="content">
    <div class="psoTitle">
      <div class="posIcon" @click="previousLayer">
        <i class="icon iconfont icon-fanhui"></i>
      </div>
      <div class="posText">示例报告</div>
    </div>
    <div class="_content">
      <div class="head_num">
        <p class="title">你的评分指数</p>
        <div class="num_text">{{ data.score }}</div>
        <div class="pgtime">
          评估时间:{{
            data.id ? data.order_info.create_time : "2023-09-19 14:03"
          }}
        </div>
        <div class="gqtime">
          报告将于
          {{ data.id ? data.order_info.end_time : "2023-09-26 14:03" }}过期
        </div>
      </div>
      <div class="pg-tiem first">
        <header>评分解读</header>
        <div class="jd-box">
          <div class="pfjd">
            <div class="jd-item">
              <p>0-20</p>
              <p>极差</p>
            </div>
            <div class="jd-item">
              <p>21-45</p>
              <p>较差</p>
            </div>
            <div class="jd-item">
              <p>46-65</p>
              <p>一般</p>
            </div>
            <div class="jd-item active">
              <p>66-85</p>
              <p>良好</p>
            </div>
            <div class="jd-item">
              <p>86-100</p>
              <p>优秀</p>
            </div>
          </div>
          <div class="tips">
            评分仅供参考,分数越高信用越好。本报告包含身份校验、借贷风险、失信等多个维度,是根据网络行为综合评估的,不包含个人隐私爬虫数据。
          </div>
        </div>
      </div>
      <div class="pg-tiem">
        <header>基本信息</header>
        <div class="jd-box">
          <div class="defInfo flex">
            <div class="user_info">
              <div class="flex">
                <img
                  src=""
                  alt=""
                  srcset=""
                />
                {{ data.id ? data.info.realName : "林萍 38岁（女）" }}
              </div>
              <div class="flex">
                <img
                  src=""
                  alt=""
                  srcset=""
                />
                {{ data.id ? data.info.phoneNumber : "187****3451(深圳市)" }}
              </div>
            </div>
            <div class="cxjg">
              <img
                src="../assets/index_image/my_12-04eb8b66.png"
                alt=""
                srcset=""
              />
              <div style="padding-right: 12px">查询结果评估</div>
            </div>
          </div>
          <div class="fl-bh flex">
            <div>报告编号</div>
            <div>ZXCX2310******4976720</div>
          </div>
          <div class="fl-bh flex">
            <div>身份证号</div>
            <div>
              {{ data.id ? data.info.idCard : "2301**************2222" }}
            </div>
          </div>
        </div>
      </div>
      <div class="pg-tiem">
        <header>风险信息</header>
        <div class="jd-box">
          <div>多头申请</div>
          <div class="content_info">
            <div class="content_text">网银贷款申请风险等级</div>
            <div class="content_color_box">
              <span class="content_color content_color_a"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color_text">A级</span>
            </div>
            <div class="content_base_text">
              <span class="content_base_text">风险低</span
              ><span class="content_base_text">风险高</span>
            </div>
          </div>
          <div class="content_info">
            <div class="content_text">黑名单命中情况风险等级</div>
            <div class="content_color_box">
              <span class="content_color content_color_a"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color_text">A级</span>
            </div>
            <div class="content_base_text">
              <span class="content_base_text">风险低</span
              ><span class="content_base_text">风险高</span>
            </div>
          </div>
          <div class="content_info">
            <div class="content_text">P2P 网贷申请风险等级</div>
            <div class="content_color_box">
              <span class="content_color content_color_a"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color_text">A级</span>
            </div>
            <div class="content_base_text">
              <span class="content_base_text">风险低</span
              ><span class="content_base_text">风险高</span>
            </div>
          </div>
          <div class="content_info">
            <div class="content_text">P2P 网贷接触时长风险等级</div>
            <div class="content_color_box">
              <span class="content_color content_color_a"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color_text">A级</span>
            </div>
            <div class="content_base_text">
              <span class="content_base_text">风险低</span
              ><span class="content_base_text">风险高</span>
            </div>
          </div>
          <div class="content_info">
            <div class="content_text">银行卡关联数风险等级</div>
            <div class="content_color_box">
              <span class="content_color content_color_a"></span
              ><span class="content_color content_color_b"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color_text">B级</span>
            </div>
            <div class="content_base_text">
              <span class="content_base_text">风险低</span
              ><span class="content_base_text">风险高</span>
            </div>
          </div>
          <div class="content_info">
            <div class="content_text">身份证号关联数风险等级</div>
            <div class="content_color_box">
              <span class="content_color content_color_a"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color_text">A级</span>
            </div>
            <div class="content_base_text">
              <span class="content_base_text">风险低</span
              ><span class="content_base_text">风险高</span>
            </div>
          </div>
          <div class="content_info">
            <div class="content_text">手机号新增数风险等级</div>
            <div class="content_color_box">
              <span class="content_color content_color_a"></span
              ><span class="content_color content_color_b"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color_text">B级</span>
            </div>
            <div class="content_base_text">
              <span class="content_base_text">风险低</span
              ><span class="content_base_text">风险高</span>
            </div>
          </div>
          <div class="content_info">
            <div class="content_text">灰名单命中情况风险等级</div>
            <div class="content_color_box">
              <span class="content_color content_color_a"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color_text">A级</span>
            </div>
            <div class="content_base_text">
              <span class="content_base_text">风险低</span
              ><span class="content_base_text">风险高</span>
            </div>
          </div>
          <div class="content_info">
            <div class="content_text">金融业务需求增加情况风险等级</div>
            <div class="content_color_box">
              <span class="content_color content_color_a"></span
              ><span class="content_color content_color_b"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color_text">B级</span>
            </div>
            <div class="content_base_text">
              <span class="content_base_text">风险低</span
              ><span class="content_base_text">风险高</span>
            </div>
          </div>
          <div class="content_info">
            <div class="content_text">名单类综合命中情况风险等级</div>
            <div class="content_color_box">
              <span class="content_color content_color_a"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color_text">A级</span>
            </div>
            <div class="content_base_text">
              <span class="content_base_text">风险低</span
              ><span class="content_base_text">风险高</span>
            </div>
          </div>
          <div class="content_info">
            <div class="content_text">历史决策流通过情况风险等级</div>
            <div class="content_color_box">
              <span class="content_color content_color_a"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color_text">A级</span>
            </div>
            <div class="content_base_text">
              <span class="content_base_text">风险低</span
              ><span class="content_base_text">风险高</span>
            </div>
          </div>
          <div class="content_info">
            <div class="content_text">金融软件登录情况风险等级</div>
            <div class="content_color_box">
              <span class="content_color content_color_a"></span
              ><span class="content_color content_color_b"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color_text">B级</span>
            </div>
            <div class="content_base_text">
              <span class="content_base_text">风险低</span
              ><span class="content_base_text">风险高</span>
            </div>
          </div>
        </div>
      </div>
      <div class="pg-tiem">
        <header>多头申请</header>
        <div class="jd-box xyqk">
          <div class="dtc">多头申请</div>
          <div
            class="charts-box"
            style="width: 100%; height: 180px; position: relative"
          >
            <qiun-vue-ucharts
              type="column"
              :opts="data.opts"
              :chartData="data.chartData"
            />
          </div>
          <div class="dtc dtc-m">多头申请汇总</div>
          <div class="zxtable">
            <div class="flex">
              <div class="tb-left">申请机构数</div>
              <div class="tb-right">1</div>
            </div>
            <div class="flex">
              <div class="tb-left">申请消费金融类机构数</div>
              <div class="tb-right">2</div>
            </div>
            <div class="flex">
              <div class="tb-left">申请网络贷款类机构数</div>
              <div class="tb-right">2</div>
            </div>
            <div class="flex">
              <div class="tb-left">最近申请时间</div>
              <div class="tb-right">/</div>
            </div>
          </div>
          <div class="content_info">
            <div class="content_text">金融平台申请风险等级</div>
            <div class="content_color_box">
              <span class="content_color content_color_a"></span
              ><span class="content_color content_color_b"></span
              ><span class="content_color content_color_c"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color_text">C级</span>
            </div>
            <div class="content_base_text">
              <span class="content_base_text">风险低</span
              ><span class="content_base_text">风险高</span>
            </div>
          </div>
        </div>
      </div>
      <div class="pg-tiem">
        <header>多头借贷</header>
        <div class="jd-box">
          <div class="dtc dtc-m">放款情况</div>
          <div style="width: 100%; height: 180px; position: relative">
            <qiun-vue-ucharts
              type="column"
              :opts="data.opts2"
              :chartData="data.chartData2"
            />
          </div>
          <div class="dtc dtc-m">放款总金额</div>
          <div class="zxtable">
            <div class="flex">
              <div class="tb-left">时间</div>
              <div class="tb-right">总金额（元）</div>
            </div>
            <div class="flex">
              <div class="tb-left">近 1 个月贷款总金额</div>
              <div class="tb-right">0</div>
            </div>
            <div class="flex">
              <div class="tb-left">近 3 个月贷款总金额</div>
              <div class="tb-right">0</div>
            </div>
            <div class="flex">
              <div class="tb-left">近 6 个月贷款总金额</div>
              <div class="tb-right">50000+</div>
            </div>
          </div>
          <div class="dtc dtc-m">机构类型</div>
          <div class="jglx">近12个月机构类型</div>
          <div style="width: 100%; height: 150px; position: relative">
            <qiun-vue-ucharts
              type="ring"
              :opts="data.opts3"
              :chartData="data.chartData3"
            />
          </div>
          <div class="jglx">近24个月机构类型</div>
          <div style="width: 100%; height: 150px; position: relative">
            <qiun-vue-ucharts
              type="ring"
              :opts="data.opts4"
              :chartData="data.chartData4"
            />
          </div>
        </div>
      </div>
      <div class="pg-tiem">
        <header>逾期情况</header>
        <div class="jd-box">
          <div class="dtc dtc-m">逾期统计</div>
          <div style="width: 100%; height: 180px; position: relative">
            <qiun-vue-ucharts
              type="column"
              :opts="data.opts5"
              :chartData="data.chartData5"
            />
          </div>
          <div class="dtc dtc-m">逾期金额</div>
          <div class="zxtable">
            <div class="flex">
              <div class="tb-left">类型</div>
              <div class="tb-right">金额（元）</div>
            </div>
            <div class="flex">
              <div class="tb-left">当前逾期机构数</div>
              <div class="tb-right">0</div>
            </div>
            <div class="flex">
              <div class="tb-left">当前逾期金额</div>
              <div class="tb-right">10000-20000</div>
            </div>
          </div>
        </div>
      </div>
      <div class="pg-tiem">
        <header>履约情况</header>
        <div class="jd-box">
          <div class="zxtable">
            <div class="flex">
              <div class="tb-left">正常还款订单数占贷款总订单数比例</div>
              <div class="tb-right">70%</div>
            </div>
            <div class="flex">
              <div class="tb-left">最近一次履约距今天数</div>
              <div class="tb-right">360+天</div>
            </div>
            <div class="flex">
              <div class="tb-left">贷款已结清机构数</div>
              <div class="tb-right">7</div>
            </div>
            <div class="flex">
              <div class="tb-left">信用贷款时长</div>
              <div class="tb-right">/</div>
            </div>
            <div class="flex">
              <div class="tb-left">最近一次贷款时间</div>
              <div class="tb-right">/</div>
            </div>
          </div>
          <div class="dtc dtc-m" style="margin-top: 20px; margin-bottom: 10px">
            还款扣款失败数
          </div>
          <div
            style="
              width: 100%;
              height: 180px;
              user-select: none;
              position: relative;
            "
          >
            <qiun-vue-ucharts
              type="column"
              :opts="data.opts6"
              :chartData="data.chartData6"
            />
          </div>
          <div class="dtc dtc-m">履约次数</div>
          <div
            style="
              width: 100%;
              height: 180px;
              user-select: none;
              position: relative;
            "
          >
            <qiun-vue-ucharts
              type="column"
              :opts="data.opts7"
              :chartData="data.chartData7"
            />
          </div>
          <div class="dtc dtc-m">履约金额</div>
          <div class="zxtable">
            <div class="flex">
              <div class="tb-left">时间</div>
              <div class="tb-right">履约金额（元）</div>
            </div>
            <div class="flex">
              <div class="tb-left">近1个月履约贷款总金额</div>
              <div class="tb-right">0</div>
            </div>
            <div class="flex">
              <div class="tb-left">近3个月履约贷款总金额</div>
              <div class="tb-right">0</div>
            </div>
            <div class="flex">
              <div class="tb-left">近6个月履约贷款总金额</div>
              <div class="tb-right">0</div>
            </div>
            <div class="flex">
              <div class="tb-left">近12个月履约贷款总金额</div>
              <div class="tb-right">5000-10000</div>
            </div>
          </div>
        </div>
      </div>
      <div class="pg-tiem xyqk">
        <header>信用情况</header>
        <div class="jd-box">
          <div class="dtc dtc-m">负债情况</div>
          <div
            style="width: 100%; height: 180px; position: relative"
            _echarts_instance_="ec_1703066233567"
          >
            <qiun-vue-ucharts
              type="column"
              :opts="data.opts8"
              :chartData="data.chartData8"
            />
          </div>
          <div class="content_info">
            <div class="content_text">多方共债情况风险等级</div>
            <div class="content_color_box">
              <span class="content_color content_color_a"></span
              ><span class="content_color content_color_b"></span
              ><span class="content_color content_color_c"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color_text">C级</span>
            </div>
            <div class="content_base_text">
              <span class="content_base_text">风险低</span
              ><span class="content_base_text">风险高</span>
            </div>
          </div>
          <div class="dtc dtc-m">授信额度</div>
          <div class="zxtable">
            <div class="flex">
              <div class="tb-left">网贷建议授信额度</div>
              <div class="tb-right">3300元</div>
            </div>
            <div class="flex">
              <div class="tb-left">网贷额度置信度</div>
              <div class="tb-right">68</div>
            </div>
            <div class="flex">
              <div class="tb-left">消金建议授信额度</div>
              <div class="tb-right">4200元</div>
            </div>
            <div class="flex">
              <div class="tb-left">消金额度置信度</div>
              <div class="tb-right">98</div>
            </div>
            <div class="flex">
              <div class="tb-left">网络贷款机构最大授信额度</div>
              <div class="tb-right">100800元</div>
            </div>
            <div class="flex">
              <div class="tb-left">网络贷款机构平均授信额度</div>
              <div class="tb-right">28000元</div>
            </div>
            <div class="flex">
              <div class="tb-left">消金贷款类机构最大授信额度</div>
              <div class="tb-right">32060元</div>
            </div>
            <div class="flex">
              <div class="tb-left">消金贷款类机构平均授信额度</div>
              <div class="tb-right">≥93元</div>
            </div>
          </div>
          <div class="dtc dtc-m">租赁情况</div>
          <div
            style="
              width: 100%;
              height: 180px;
              user-select: none;
              position: relative;
            "
          >
            <qiun-vue-ucharts
              type="column"
              :opts="data.opts9"
              :chartData="data.chartData9"
            />
          </div>
          <div class="content_info">
            <div class="content_text">融资租赁业务频繁情况风险等级</div>
            <div class="content_color_box">
              <span class="content_color content_color_a"></span
              ><span class="content_color content_color_b"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color"></span
              ><span class="content_color_text">B级</span>
            </div>
            <div class="content_base_text">
              <span class="content_base_text">风险低</span
              ><span class="content_base_text">风险高</span>
            </div>
          </div>
          <div class="content_base">历史租赁申请最高风险分数： 68分</div>
          <div class="content_base">是否命中租赁黑名单： 命中</div>
        </div>
      </div>
      <div class="pg-tiem">
        <header>被执行人信息</header>
        <div class="jd-box">
          <div class="header_top">共0条记录</div>
          <div class="tips-zx">
            <div class="titless">建议</div>
            <div class="textss">
              如有被执行人相关文书，请立即履行生效法律文书确定的义务，向相关法院申请移出失信被执行人和法院被
              执行人名单。
            </div>
          </div>
        </div>
      </div>
      <div class="pg-tiem">
        <header>失信被执行人信息</header>
        <div class="jd-box">
          <div class="header_top">共1条记录</div>
          <div>
            <div class="flex_zx">
              <div class="zx-left">姓名</div>
              <div class="zx-right">张*林</div>
            </div>
            <div class="flex_zx">
              <div class="zx-left">身份证号</div>
              <div class="zx-right">3425**********8218</div>
            </div>
            <div class="flex_zx">
              <div class="zx-left">年龄</div>
              <div class="zx-right">29</div>
            </div>
            <div class="flex_zx">
              <div class="zx-left">性别</div>
              <div class="zx-right">男性</div>
            </div>
            <div class="flex_zx">
              <div class="zx-left">省份</div>
              <div class="zx-right">安徽</div>
            </div>
            <div class="flex_zx">
              <div class="zx-left">案号</div>
              <div class="zx-right">(2023)皖1**2执1**5号</div>
            </div>
            <div class="flex_zx">
              <div class="zx-left">立案时间</div>
              <div class="zx-right">2023-03-23</div>
            </div>
            <div class="flex_zx">
              <div class="zx-left">执行法院</div>
              <div class="zx-right">宣城市***人民法院</div>
            </div>
            <div class="flex_zx">
              <div class="zx-left">执行依据文号</div>
              <div class="zx-right">(2023)皖1**2诉前调确1*0号</div>
            </div>
            <div class="flex_zx">
              <div class="zx-left">做出执行依据单位</div>
              <div class="zx-right">宣城市***人民法院</div>
            </div>
            <div class="flex_zx">
              <div class="zx-left">被执行人的履行情况</div>
              <div class="zx-right">全部未履行</div>
            </div>
            <div class="flex_zx">
              <div class="zx-left">失信类型</div>
              <div class="zx-right">
                申请人张*林与杨*鑫于2023年2月21日经宣城市诉调对接人民调解委员会主持调解达成的调解协议有效。当事人应当按照调解协议的约定自觉履行义务。一方当事人拒绝履行或者未全部履行的，对方当事人可以向人民法院申请执行。
              </div>
            </div>
            <div class="flex_zx">
              <div class="zx-left">发布时间</div>
              <div class="zx-right">2023年05月29日</div>
            </div>
          </div>
          <div class="tips-zx tips-zx-color">
            <div class="titless">说明</div>
            <div class="textss">
              失信被执行人，是指有履行能力但是逃避执行、规避执行、抗拒执行的被执行人，俗称老赖。
              法院被执行人
              是指在法定的上诉期满后，或终审判决作出后，拒不履行法院判决或仲裁裁决的当事人。
            </div>
          </div>
          <div class="tips-zx">
            <div class="titless">建议</div>
            <div class="textss">
              如有被执行人相关文书，请立即履行生效法律文书确定的义务，向相关法院申请移出失信被执行人和法院被
              执行人名单。
            </div>
          </div>
        </div>
      </div>
      <div class="pg-tiem buttom-recommendation">
        <div class="buttom_title">提高信用评分消除风险的建议</div>
        <div class="buttom_text">
          提高信用评分消除风险的建议: <br />
          1.信用卡一年内申请不超过 6 次,含同一机构,网贷 3 个月内申请不超过 20
          次,控制申请频率; 2.如果有逾期或者被执行等不良记录,保持良好信用 1-2
          年,记录可以滚动覆盖过去;<br />
          3.保持良好的借贷习惯,切勿频繁申请,拒绝不明平台的审核邀请;<br />
          4.减少和网贷黑名单这类人群的联系,提高自己朋友圈优良信用人群比例
        </div>
      </div>
      <div class="pg-tiem buttom-recommendation">
        <div class="buttom_title">大数据报告说明</div>
        <div class="buttom_text">
          报告由本人授权查询，本报告包含身份校验、借贷风险、失信等多个维度,是根据网络行为综合评估的,不包含个人隐私爬虫数据。
          只做大数据信息的获取及分析，不对原始数据做任何修改，仅供参考使用。如你对报告有异议，出于对合作平台数据隐私的保
          护 ，平台将不做任何解释
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch, defineProps, defineEmits } from "vue";
import { setItem, removeItem, getItem } from "../uint/localStorage.js";
import qiunVueUcharts from "@qiun/vue-ucharts";
import request from "../api/reuests";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const data = reactive({
  score: 74,
  id: "",
  order_info: {},
  info: "",
  chartData: {
    categories: ["近1个月", "近3个月", "近6个月"],
    series: [
      {
        name: "申请次数",
        data: [0, 0, 5],
      },
    ],
  },
  chartData2: {
    categories: ["近1个月", "近3个月", "近6个月", "近12个月", "近24个月"],
    series: [
      {
        name: "放贷次数",
        data: [0, 0, 0, 0, 44],
      },
      {
        name: "放贷机构数",
        data: [0, 0, 0, 0, 14],
      },
    ],
  },
  chartData3: {
    series: [
      {
        data: [
          {
            name: "消费金融机构数:0",
            value: 0,
          },
          {
            name: "网络贷款机构数:0",
            value: 0,
          },
        ],
      },
    ],
  },
  chartData4: {
    series: [
      {
        data: [
          {
            name: "消费金融机构数:8",
            value: 8,
          },
          {
            name: "网络贷款机构数:6",
            value: 6,
          },
        ],
      },
    ],
  },
  chartData5: {
    categories: ["近6个月", "近12个月", "近24个月"],
    series: [
      {
        name: "M0逾期笔数",
        data: [0, 0, 7],
      },
      {
        name: "M1逾期笔数",
        data: [0, 0, 1],
      },
    ],
  },
  chartData6: {
    categories: ["近1个月", "近3个月", "近6个月", "近12个月", "近24个月"],
    series: [
      {
        name: "扣款失败数",
        data: [13, 13, 13, 32, 660],
      },
    ],
  },
  chartData7: {
    categories: ["近1个月", "近3个月", "近6个月", "近12个月", "近24个月"],
    series: [
      {
        name: "履约次数",
        data: [0, 0, 0, 0, 10],
      },
    ],
  },
  chartData8: {
    categories: ["产品数", "机构数"],
    series: [
      {
        name: "消费金融",
        data: [16, 12],
      },
      {
        name: "网络贷款",
        data: [2, 2],
      },
    ],
  },
  chartData9: {
    categories: ["近七天", "近1个月", "近3个月", "近6个月"],
    series: [
      {
        name: "申请次数",
        data: [3, 5, 5, 8],
      },
    ],
  },
  opts: {
    color: ["#196dff"],
    padding: [15, 30, 30, 30],
    enableScroll: false,
    legend: {
      position: "bottom",
      float: "center",
    },
    xAxis: {
      disableGrid: true,
    },
    yAxis: {
      // splitNumber: 4,
      data: [
        {
          min: 0,
        },
      ],
    },
    extra: {
      column: {
        type: "group",
      },
    },
  },
  opts2: {
    color: ["#196dff", "#ffba19"],
    padding: [15, 30, 30, 30],
    enableScroll: false,
    // dataLabel: false,
    legend: {
      position: "bottom",
      float: "center",
    },
    xAxis: {
      disableGrid: true,
    },
    yAxis: {
      data: [
        {
          min: 0,
        },
      ],
    },
    extra: {
      pieLabelNone: true,
      column: {
        label: {
          show: false, // 设置为false隐藏数据标签
        },
        type: "group",
        // width: 60,
        activeBgColor: "#000000",
        activeBgOpacity: 0.08,
      },
    },
  },
  opts3: {
    rotate: false,
    rotateLock: false,
    color: ["#196dff", "#ffba19"],
    padding: [5, 5, 5, 5],
    dataLabel: true,
    enableScroll: false,
    legend: {
      show: true,
      position: "right",
      lineHeight: 25,
    },
    title: {
      name: "",
      fontSize: 15,
      color: "#666666",
    },
    subtitle: {
      name: "",
      fontSize: 25,
      color: "#7cb5ec",
    },
    extra: {
      ring: {
        // ringWidth: 60,
        activeOpacity: 0.5,
        activeRadius: 10,
        offsetAngle: 0,
        labelWidth: 15,
        border: true,
        borderWidth: 3,
        borderColor: "#FFFFFF",
      },
    },
  },
  opts4: {
    rotate: false,
    rotateLock: false,
    color: ["#196dff", "#ffba19"],
    padding: [5, 5, 5, 5],
    dataLabel: true,
    enableScroll: false,
    legend: {
      show: true,
      position: "right",
      lineHeight: 25,
    },
    title: {
      name: "",
      fontSize: 15,
      color: "#666666",
    },
    subtitle: {
      name: "",
      fontSize: 25,
      color: "#7cb5ec",
    },
    extra: {
      ring: {
        // ringWidth: 60,
        activeOpacity: 0.5,
        activeRadius: 10,
        offsetAngle: 0,
        labelWidth: 15,
        border: true,
        borderWidth: 3,
        borderColor: "#FFFFFF",
      },
    },
  },
  opts5: {
    color: ["#196dff", "#ffba19"],
    padding: [15, 30, 30, 30],
    enableScroll: false,
    // dataLabel: false,
    legend: {
      position: "bottom",
      float: "center",
    },
    xAxis: {
      disableGrid: true,
    },
    yAxis: {
      splitNumber: 7,
      data: [
        {
          min: 0,
        },
      ],
    },
    extra: {
      pieLabelNone: true,
      column: {
        label: {
          show: false, // 设置为false隐藏数据标签
        },
        type: "group",
        // width: 60,
        activeBgColor: "#000000",
        activeBgOpacity: 0.08,
      },
    },
  },
  opts6: {
    color: ["#ffba19"],
    padding: [15, 30, 30, 30],
    enableScroll: false,
    // dataLabel: false,
    legend: {
      position: "bottom",
      float: "center",
    },
    xAxis: {
      disableGrid: true,
    },
    yAxis: {
      data: [
        {
          min: 0,
        },
      ],
    },
    extra: {
      pieLabelNone: true,
      column: {
        label: {
          show: false, // 设置为false隐藏数据标签
        },
        type: "group",
        // width: 60,
        activeBgColor: "#000000",
        activeBgOpacity: 0.08,
      },
    },
  },
  opts7: {
    color: ["#196dff", "#ffba19"],
    padding: [15, 30, 30, 30],
    enableScroll: false,
    // dataLabel: false,
    legend: {
      position: "bottom",
      float: "center",
    },
    xAxis: {
      disableGrid: true,
    },
    yAxis: {
      data: [
        {
          min: 0,
        },
      ],
    },
    extra: {
      pieLabelNone: true,
      column: {
        label: {
          show: false, // 设置为false隐藏数据标签
        },
        type: "group",
        // width: 60,
        activeBgColor: "#000000",
        activeBgOpacity: 0.08,
      },
    },
  },
  opts8: {
    color: ["#ffba19", "#196dff"],
    padding: [15, 30, 30, 30],
    enableScroll: false,
    // dataLabel: false,
    legend: {
      position: "bottom",
      float: "center",
    },
    xAxis: {
      disableGrid: true,
    },
    yAxis: {
      data: [
        {
          min: 0,
        },
      ],
    },
    extra: {
      pieLabelNone: true,
      column: {
        label: {
          show: false, // 设置为false隐藏数据标签
        },
        type: "group",
        // width: 60,
        activeBgColor: "#000000",
        activeBgOpacity: 0.08,
      },
    },
  },
  opts9: {
    color: ["#ffba19"],
    padding: [15, 30, 30, 30],
    enableScroll: false,
    // dataLabel: false,
    legend: {
      position: "bottom",
      float: "center",
    },
    xAxis: {
      disableGrid: true,
    },
    yAxis: {
      data: [
        {
          min: 0,
        },
      ],
    },
    extra: {
      pieLabelNone: true,
      column: {
        label: {
          show: false, // 设置为false隐藏数据标签
        },
        type: "group",
        // width: 60,
        activeBgColor: "#000000",
        activeBgOpacity: 0.08,
      },
    },
  },
});

const getDetail = () => {
  request({
    url:"/index/getDetail",
    method: "POST",
    data: {
      id: data.id,
    },
  })
    .then((res) => {
      if (res.code == 200) {
        data.order_info = res.data;
        data.info = res.data.user;
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch((err) => {
      console.error(err);
    });
};
const previousLayer = () => {
  router.go(-1);
};
onMounted(() => {
  data.id = route.query?.id;
  data.info = getItem("info");
  if (data.id) {
    getDetail();
  }
});
</script>

<style lang="less" scoped>
.content {
  min-height: 100vh;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-image: url(../assets/index_image/h5-18255dc0.png);
  background-size: cover;
}
.psoTitle {
  background-color: #fff;
  width: 100%;
  height: 44px;
  line-height: 44px;
  display: flex;
  align-items: center;
  box-shadow: 0 3px 5px #00000017;
  max-width: 750px;
  margin: 0 auto;
}
.posIcon {
  height: 44px;
  width: 44px;
  text-align: center;
  justify-content: center;
  position: absolute;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.posText {
  height: 44px;
  width: 100%;
  line-height: 44px;
  text-align: center;
  font-size: 16px;
}
._content {
  margin: 0 auto;
  overflow-y: auto;
  box-sizing: border-box;
  max-width: 750px;
  box-shadow: 0 0 15px 4px #dbcfad;
  padding-bottom: 20px;
  position: relative;
  max-height: calc(100vh - 44px);
}
.head_num {
  padding-top: 10px;
  width: 100%;
  text-align: center;
  height: 280px;
  background: #196dff;
  box-sizing: border-box;
  padding-bottom: 20px;
  .title {
    display: block;
    color: #fff;
    font-weight: 700;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  }
  .num_text {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    border: 5px solid #ffb81c;
    background: #fff;
    font-size: 36px;
    font-weight: 700;
    color: #196dff;
    text-align: center;
    line-height: 78px;
    box-shadow: 0 0 55px #ffffff80;
    margin: 0 auto;
  }
  .pgtime {
    font-size: 14px;
    color: #fff;
    margin: 10px 0 5px;
  }
  .gqtime {
    font-size: 10px;
    color: #fff;
    padding: 1px 9px;
    background: rgba(0, 0, 0, 0.14);
    border-radius: 8px;
    box-sizing: border-box;
    width: max-content;
    margin: 0 auto;
  }
}
.pg-tiem {
  width: calc(100% - 25px);
  margin: 20px auto 0;
  border-radius: 10px;
  background-color: #fff;
  position: relative;

  header {
    margin-top: 10px;
    width: 100%;
    height: 39px;
    background: linear-gradient(276deg, #d1e2ff, #ecf3ff 51%);
    border-radius: 8px 8px 0 0;
    text-align: center;
    line-height: 39px;
    font-size: 15px;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: 700;
    color: #196dff;
  }
  .pfjd {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .jd-box {
    padding: 10px 10px 20px;
    position: relative;
  }
  .jd-item {
    border: 1px solid #ccc;
    margin-left: -1px;
    width: 20%;
    padding: 4px 0;
    font-size: 13px;
    color: #2279ff;
  }
  .active {
    color: red;
    font-weight: 700;
  }
  .tips {
    color: #666;
    font-size: 12px;
    margin-top: 15px;
  }
  .defInfo {
    font-size: 14px;
    color: #4c5253;
    padding: 5px;
    border-radius: 20px;
    line-height: 22px;
  }
  .flex {
    display: flex;
    align-items: center;
  }
  .user_info {
    line-height: 40px;
    font-weight: 700;
    width: 55%;
    img {
      width: 24px;
      height: 24px;
      margin-right: 10px;
    }
  }
  .cxjg {
    width: 45%;
    font-size: 12px;
    text-align: right;
    img {
      width: 70%;
      max-width: 100px;
    }
  }
  .fl-bh {
    display: flex;
    font-size: 13px;
    color: #666;
    justify-content: space-between;
    margin-top: 10px;
    padding: 0 10px;
  }
}
.first {
  margin-top: -70px;
}
.content_info {
  width: 100%;
  border-bottom: 1px solid #e3e3e3;
  padding: 10px;
  box-sizing: border-box;
  white-space: nowrap;
  .content_text {
    font-size: 11px;
    font-weight: 700;
    color: #333;
  }
  .content_color_box {
    margin-top: 8px;
    display: flex;
    align-items: center;

    .content_color {
      margin: 0 0.5px;
      width: 48px;
      height: 10px;
      background: #e3e3e3;
      flex-grow: 1;
    }
    .content_color_text {
      margin-left: 4px;
      font-size: 11px;
      font-weight: 700;
      color: #e01919;
    }
    .content_color_a {
      background: #04ae48;
    }
    .content_color_b {
      background: #97ce45;
    }
    .content_color_c {
      background: #fcfb09;
    }
  }
  .content_base_text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 1px;
    .content_base_text {
      font-size: 12px;
      font-weight: 500;
      color: #666;
      width: 100%;
      display: inline-block;
    }
  }
}
.dtc {
  padding-left: 5px;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
  color: #196dff;
  .dtc-m {
    margin-bottom: 15px;
  }
}
.zxtable {
  .flex {
    display: flex;
    align-items: center;
    justify-content: center;

    .tb-left {
      width: 50%;
      border: 1px solid rgba(25, 109, 255, 0.2);
      background: #f9fdff;
      font-size: 11px;
      font-weight: 700;
      color: #196dff;
      line-height: 35px;
      text-align: center;
      padding: 0 10px;
    }
    .tb-right {
      width: 50%;
      border: 1px solid rgba(25, 109, 255, 0.2);
      background: #f9fdff;
      font-size: 11px;
      font-weight: 700;
      text-align: center;
      color: #196dff;
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.jglx {
  margin-top: 12px;
  padding-left: 20px;
  font-size: 12px;
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
}
.content_base {
  font-size: 12px;
  font-weight: 700;
  color: #196dff;
  line-height: 26px;
  padding: 0 10px;
}
.header_top {
  margin-bottom: 12px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #196dff;
}
.tips-zx {
  margin: 6px 0;
  background: #fffcf3;
  padding: 10px 6px 15px;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  .titless {
    font-size: 15px;
    font-weight: 700;
    color: #ffba19;
    margin-bottom: 5px;
  }
  .textss {
    font-size: 10px;
    font-weight: 400;
    color: #999;
  }
}
.flex_zx {
  display: flex;
  align-items: center;
  margin: 15px 0;
  .zx-left {
    min-width: 130px;
    font-size: 10px;
    font-weight: 700;
    color: #333;
  }
  .zx-right {
    font-size: 10px;
    font-weight: 700;
    color: #666;
  }
}

.buttom-recommendation {
  box-sizing: border-box;
  margin-top: 20px;
  width: 355px;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  .buttom_title {
    font-size: 15px;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: 700;
    text-align: center;
    color: #196dff;
    margin-bottom: 12px;
  }
  .buttom_text {
    font-size: 10px;
    font-weight: 400;
    color: #999;
  }
}
.pg-tiem {
  width: calc(100% - 25px);
  margin: 20px auto 0;
  border-radius: 10px;
  background-color: #fff;
  position: relative;
}
</style>
